<template>
  <div>
    <el-dialog
      :title="addInfo.isAdd ? '添加角色' : '编辑角色'"
      :visible.sync="addInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="roleForm" :rules="rules" ref="roleForm">
        <el-form-item
          label="角色名称"
          prop="rolename"
          :label-width="formLabelWidth"
        >
          <el-input autocomplete="off" v-model="roleForm.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <!-- 
                el-tree 
                data	展示数据	array
                show-checkbox	节点是否可被选择	boolean
                default-expand-all	是否默认展开所有节点
                props	配置选项，具体看下表	object
                        label	指定节点标签为节点对象的某个属性值
                        children	指定子树为节点对象的某个属性值
                check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
             -->
          <el-tree
            check-strictly
            ref="tree"
            :data="$store.getters['menu/getMenu']"
            show-checkbox
            node-key="id"
            default-expand-all
            :props="{
              children: 'children',
              label: 'title',
            }"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
            v-model="roleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { roleAdd, getRoleInfo, roleEdit } from "../../request/api";
// import {mapActions} from 'vuex'
export default {
  data() {
    return {
      formLabelWidth: "120px",
      roleForm: {
        rolename: "",
        menus: "",
        status: 1,
      },
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  props: ["addInfo"],
  mounted() {
    //为了减少服务器的压力，我们进行行动触发优化
    //如何优化？ 如果用户已经在其他模块调用菜单列表则本模块不进行调用，否则。本模块触发行动
    //触发菜单行动
    if (this.$store.getters["menu/getMenu"].length == 0) {
      this.$store.dispatch("menu/getMenuAction");
    }
  },
  methods: {
    //重置事件
    reset() {
      this.roleForm = {
        rolename: "",
        menus: "",
        status: 1,
      };
      this.$refs.roleForm.resetFields();
      //清空树节点
      //getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
      //setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      this.$refs.tree.setCheckedKeys([]);
    },
    cancel() {
      this.reset();
      this.$emit("cancel", false);
    },
    lookup(id) {
      getRoleInfo({ id }).then((res) => {
        if (res.code == 200) {
          this.roleForm = res.list;
          this.roleForm.id = id;
          // 发现后端返回的menus: "1,2"  而树形结构 想要的格式是数组
          //   this.roleForm.menus
          //     ? this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(","))
          //     : this.$refs.tree.setCheckedKeys([]);
          // this.roleForm.menus 1,2
          console.log(this.roleForm.menus);
          //this.$refs.tree.setCheckedKeys([5,7]);
          this.roleForm.menus
            ? this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(","))
            : this.$refs.tree.setCheckedKeys([]);
        }
      });
    },
    //封装一个确认事件
    confirm() {
      this.$refs.roleForm.validate((val) => {
        if (val) {
          /* 
            menus 后端需要的格式是 '2,3,4' 字符串  
            而目前获取的格式是 [2,3,4]
            要转化格式
            */
          //    console.log(this.$refs.tree.getCheckedKeys().join(','))
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
          if (this.addInfo.isAdd) {
            //添加逻辑
            roleAdd(this.roleForm).then((res) => {
              // console.log(res,'角色添加');
              if (res.code == 200) {
                this.cancel();
                //重新获取列表
                this.$store.dispatch("role/getRoleAction");
                this.$message.success(res.msg);
              } else {
                this.$message.warning(res.msg);
              }
            });
          } else {
            //编辑逻辑
            roleEdit(this.roleForm).then((res) => {
              // console.log(res,'角色添加');
              if (res.code == 200) {
                this.cancel();
                //重新获取列表
                this.$store.dispatch("role/getRoleAction");
                this.$message.success(res.msg);
              } else {
                this.$message.warning(res.msg);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped></style>
